/**
 * @Description: 公交卡页面
 * @author tao.xie
 * @date 2019-07-23 10:52
*/
<template>
  <div id="app">
    <!--v-if="hasLogin" 无需登录-->
    <div v-if="showPayChannel">
      <!-- <div class="msg">
        <i class="iconfont icon-tixing"></i>
        <p class="fontsize28">乘公交扫码方式可在“我的-设置”中修改</p>
      </div> -->
      <div class="pay-wrapper flex-v flex-vc">
        <img
          v-for="(item,index) in payModeDist"
          v-bind:key="index"
          :src="item.img"
          @click="_clickToPay(item)"
        />
      </div>
      <!-- 暂时去掉默认勾选功能 -->
      <!-- <div
        class="flex-h flex-vc tips-wrapper"
        @click="changeDefault"
      >
        <i
          class="iconfont"
          :class="asDefaultPayChannel?'baseColorWithActive icon-choose':'baseColorInvalid'"
        />
        <span>记住所选方式</span>
      </div> -->
    </div>
  </div>
</template>

<script>
// 微信
// 支付方式的缓存
// import { UserBeanUtils } from 'vue-xiaobu-utils'
const PAYTYPE_CACHE_KEY = 'BUSCARD_PAYTYPE_CACHE_KEY'
// const LOGIN_URL = 'xbapp://pop/city-app/login.html?_tv=false&backtoroot=true&select=1'
export default {
  data() {
    return {
      asDefaultPayChannel: false, // 是否作为默认刷吗支付的勾选
      showPayChannel: true, // 是否展示支付选择页面
      // hasLogin: UserBeanUtils.isUserLogin(), // 用户是否登录
      payModeDist: [
        {
          type: 'ALI_PAY',
          img: require('./assets/ali_pay.png'),
          url: 'alipays://platformapi/startapp?appId=200011235&cardType=T0310100&ext_info=%7B%22channel111%22%3A%22source%22%2C%22subSceneCode%22%3A%220310100%22%7D'
        }, {
          type: 'WX_PAY',
          img: require('./assets/wx_pay.png'),
          url: '/pages/qrcode/index?city_code=310000&ykt_id=10000101&extra={"app_name":"嘉定行","app_logo":"https://www.jiaofajituan.com/logo.jpg","parameter":"嘉定行","text":"返回"}', // 小程序拉起路径
          miniId: 'gh_3cf62f4f1d52', // 小程序原始Id
          appId: 'wxa85ae04626a77c0e'// 开放平台应用Id
        }
        // {
        //   type: 'UNION_PAY',
        //   img: require('./assets/union_pay.png'),
        //   url: 'http://www.baidu.com'
        // }
      ]
    }
  },
  mounted() {
    // 暂时去掉默认勾选功能
    // this.resetDispath()
    // document.addEventListener('resume', () => {
    //   this.resetDispath()
    // })
  },
  methods: {
    _payFromLocal(payType) { // 根据本地的支付方式,拉起扫码
      this.payModeDist.map(item => {
        if (item.type === payType) { // 判断当前保存的扫码方式
          // window.location.assign(item.url)
          this.$ThirdParty.then(ThirdParty => {
            ThirdParty.openThirdApp(0, item.url)// 0 支付宝
          })
        }
      })
    },
    _clickToPay(payOption) { // 点击拉起扫码
      if (this.asDefaultPayChannel) {
        this.savePayType(payOption.type)
      }

      switch (payOption.type) {
        case 'ALI_PAY':// 拉起支付宝乘车码
          this.$ThirdParty.then(ThirdParty => {
            ThirdParty.openThirdApp(0, payOption.url)// 0 支付宝
          })
          break
        case 'WX_PAY':// 拉起微信小程序
          this.$ThirdParty.then(ThirdParty => {
            ThirdParty.openMiniProgram(payOption.miniId, encodeURI(payOption.url), payOption.appId)// 微信小程序
          })
          break
        default:
          break
      }

      // window.location.assign(payOption.url)
    },
    savePayType(payType) { // 保存默认的支付方式
      window.localStorage.setItem(PAYTYPE_CACHE_KEY, payType)
    },
    getPayTypeFromLocal() { // 获取默认的支付方式
      return window.localStorage.getItem(PAYTYPE_CACHE_KEY)
    },
    // changeDefault() {
    //   this.asDefaultPayChannel = !this.asDefaultPayChannel
    // },
    resetDispath() { // 重制业务逻辑的处理
      // this.hasLogin = UserBeanUtils.isUserLogin() // 移除登录判断
      // if (this.hasLogin) {
      let payTypeFromLocal = this.getPayTypeFromLocal()
      console.log(payTypeFromLocal)
      if (payTypeFromLocal) {
        this._payFromLocal(payTypeFromLocal)
        this.showPayChannel = false
      } else {
        this.showPayChannel = true
      }
      /* } else {
        window.location.assign(LOGIN_URL)
      } */
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #ffffff;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  position: relative;
}
.msg {
  width: 686px;
  margin: auto;
  margin-top: 32px;
  background-color: #f3f5f6;
  border-radius: 25px; /* no */
}
.msg > i {
  margin-left: 32px;
  margin-right: 16px;
  color: #027aff;
}
.msg > p {
  height: 64px;
  line-height: 64px;
  display: inline-block;
  color: #666666;
}
/*支付渠道图片*/
.pay-wrapper > img {
  width: 686px;
  height: 172px;
  margin-top: 32px;
}
/*底部文字说明包裹层*/
.tips-wrapper {
  margin: 32px 0px 0px 32px;
}
/*底部说明图片*/
.tips-wrapper > i {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 4px; /* no */
  border: 1px solid #999999; /* no */
  margin-right: 18px;
  transition: all 0.3s;
}
.tips-wrapper > .icon-choose {
  color: #fff;
  background-color: #027aff;
  border: 1px solid #027aff; /* no */
}
/*底部文字说明第一部分深色文字*/
.tips-wrapper > span {
  color: #000;
  font-size: 16px; /*no*/
  line-height: 22px; /*no*/
}
</style>
